<template>
    <section class="group-item">
      <div class="inner">
          <div class="thumbs" style="width: 147px;height: 99px">
              <div style="width: 64px;height: 64px;margin: 0 auto">
                  <img :src="$Url+data.avatar" alt="thumbs">
              </div>
              <div class="pop">
                  <Dropdown trigger="click" style="margin-left: 20px" v-if="type === 1" @on-click="clickM($event,data.id)">
                      <a href="javascript:void(0)">
                          设置
                          <Icon type="ios-arrow-down"></Icon>
                      </a>
                      <DropdownMenu slot="list">
                          <DropdownItem name="1">发送消息</DropdownItem>
                          <DropdownItem name="2">设置为副圈主</DropdownItem>
                          <DropdownItem name="3">屏蔽此人发言</DropdownItem>
                          <DropdownItem name="4">举报该用户</DropdownItem>
                          <DropdownItem name="5">拉入黑名单</DropdownItem>
                      </DropdownMenu>
                  </Dropdown>
                  <Dropdown trigger="click" style="margin-left: 20px" v-if="type === 2" @on-click="clickH($event,data.id)">
                      <a href="javascript:void(0)">
                          设置
                          <Icon type="ios-arrow-down"></Icon>
                      </a>
                      <DropdownMenu slot="list">
                          <DropdownItem name="1">移出黑名单</DropdownItem>
                          <DropdownItem name="2">彻底删除</DropdownItem>
                      </DropdownMenu>
                  </Dropdown>
                  <Dropdown trigger="click" style="margin-left: 20px" v-if="type === 3" @on-click="clickS($event,data.id)">
                      <a href="javascript:void(0)">
                          加入申请
                          <Icon type="ios-arrow-down"></Icon>
                      </a>
                      <DropdownMenu slot="list">
                          <DropdownItem name="1">通过审核</DropdownItem>
                          <DropdownItem name="2">拒绝加入</DropdownItem>
                          <DropdownItem>回复:本群只用于女士交流</DropdownItem>
                          <DropdownItem><Checkbox v-model="single">拒绝此人再申请</Checkbox></DropdownItem>
                      </DropdownMenu>
                  </Dropdown>
              </div>
          </div>
          <div class="details ">
            <p class="title" style="height: 24px">{{data.nickname}}</p>
              <p class="location">
                  <span class="pink"><Icon type="md-locate" /></span>
                 {{data.shi_id}}
              </p>
          </div>
      </div>
    </section>
</template>

<script>
    /**
     * @type
     * type = 1 列表
     * type = 2 已审核
     * type = 3 未通过审核
     * type = 4 被投诉的
     * **/
export default {
  name: 'GroupItem',
    props: {
        data: {
            type: Object,
            required: true
        },
        type: {

        },
        cid:{

        }
    },
        data (){
         return {
             single:false,
             list:[]
         }
        },
        methods :{
            clickM (event,id) {
                if(event == 2){
                    let _this =this
                    _this.$post('/api/circle/setFuzhu',
                        {
                            token:_this.$token,
                            user_id:id,
                            circle_id:_this.cid
                        }, function (res) {
                            console.log(res)
                            // _this.$message.success(res.msg);
                        }, function (err,errcode,errmsg) {

                            _this.$message.error(err);
                        })
                }
                if(event == 3){
                    let _this =this
                    _this.$post('/api/circle/ShieldSpeech',
                        {
                            token:_this.$token,
                            user_id:id,
                            circle_id:_this.cid
                        }, function (res) {
                            _this.$message.success(res.msg);
                        }, function (err,errcode,errmsg) {
                              console.log(err)
                              console.log(errmsg)
                              console.log(errcode)
                            _this.$message.error(errcode);
                        })
                }
                if(event == 5){
                    let _this =this
                    _this.$post('/api/circle/addBlacCircleUser',
                        {
                            token:_this.$token,
                            user_id:id,
                            circle_id:_this.cid
                        }, function (res) {
                            _this.$message.success(res.msg);
                        }, function (err,errcode,errmsg) {
                            _this.$message.error(errcode);
                        })
                }
            },
            clickH (event,id) {
                if(event == 1){
                    let _this =this
                    _this.$post('/api/circle/outBlacCircleUser',
                        {
                            token:_this.$token,
                            user_id:id,
                            circle_id:_this.cid
                        }, function (res) {
                            console.log(res)
                            _this.$message.success(res.msg);
                        }, function (err,errcode,errmsg) {

                            _this.$message.error(err);
                        })
                }
                if(event == 2){
                    let _this =this
                    _this.$post('/api/circle/delCircleUser',
                        {
                            token:_this.$token,
                            user_id:id,
                            circle_id:_this.cid
                        }, function (res) {
                            _this.$message.success(res.msg);
                        }, function (err,errcode,errmsg) {
                            console.log(err)
                            console.log(errmsg)
                            console.log(errcode)
                            _this.$message.error(errcode);
                        })
                }
            },
            clickS (event,id) {
                if(event == 1){
                    let _this =this
                    _this.$post('/api/circle/throughCircleUser',
                        {
                            token:_this.$token,
                            user_id:id,
                            circle_id:_this.cid
                        }, function (res) {
                            console.log(res)
                            _this.$message.success(res.msg);
                        }, function (err,errcode,errmsg) {

                            _this.$message.error(err);
                        })
                }
                if(event == 2){
                    let _this =this
                    _this.$post('/api/circle/refuseCircleUser',
                        {
                            token:_this.$token,
                            user_id:id,
                            circle_id:_this.cid
                        }, function (res) {
                            _this.$message.success(res.msg);
                        }, function (err,errcode,errmsg) {
                            console.log(err)
                            console.log(errmsg)
                            console.log(errcode)
                            _this.$message.error(errcode);
                        })
                }
            },
        }
}
</script>

<style  lang="less">
  @import "../../style/style.less";
  .group-item {
      .inner {
          padding: 10px;
          .thumbs {
              line-height: 1;
              font-size: 0;
              text-align: center;
              padding: 20px 0 15px;
              border-right: 1px solid @border-color;
              &:nth-child(4n) {
                  border-right: 1px solid transparent;
              }
              img {
                  width: 64px;
                  height: 64px;
                  border-radius: 50%;
              }
              }
          .thumbs:hover{
              .pop{
                  display: block;
              }
          }
          .pop {
              font-size: 14px;
              /*display: none;*/
              width: 64px;
              height: 64px;
              background-color: rgba(0,0,0,.5);
              border-radius: 50%;
              position: absolute;
              /*top: 0;*/
              margin-top: -79px;
              margin-left: 41px;
              text-align: center;
              line-height: 64px;
              z-index: 5;
              color: white;
              cursor: pointer;
              .ivu-dropdown{
                  margin-left: 0px !important;
                  a{
                      color: white !important;
                      .ivu-icon-ios-arrow-down{
                          display: none;
                      }
                  }
              }
              .ivu-select-dropdown{
                  left: 70px !important;
                  z-index: 10;
                  top:20px !important;
              }
              .ivu-dropdown-item:hover {
                  background: @theme-color-dark;
                  color: white;
              }
          }
          .details {
              .title {
                  font-size: 16px;
                  color: @theme-color-dark;
                  text-align: center;
              }
              .location {
                  font-size: 12px;
                  color: #999;
                  text-align: center;
              }
              .creator, .count {
                  /*margin-bottom: 10px;*/
              }
              .option-btn {
                  text-align: center;
                  margin-top: 10px;
                  .btn {
                      display: inline-block;
                      border: 1px solid @theme-color;
                      height: 28px;
                      line-height: 28px;
                      padding: 0 15px;
                      color: @theme-color;
                      border-radius: 4px;
                      margin-right: 10px;
                  }
              }
          }
      }
  }
</style>
